<template>
    <el-card class="product-edit" :class="products.length < 2 && 'text-center'">
        <el-form
            label-width="80px"
            label-position="left"
            :class="products.length < 2 ? 'px-0' : 'pd'"
            class="w-1/2 inline-block product-edit__item"
            v-for="(v, i) in products" :key="i">
            <el-form-item label="产品牌号">
                <el-input placeholder="LPD-183UV Light Curable Adhesive" v-model="v.productName"></el-input>
            </el-form-item>

            <el-form-item label="所属品牌">
                <el-input placeholder="3M" v-model="v.manufactureName"></el-input>
            </el-form-item>

            <el-form-item label="附件类型">
                <el-input placeholder="pdf" v-model="v.fileType"></el-input>
            </el-form-item>

            <el-form-item label="建议分类">
                <el-input placeholder="分类" v-model="v.catalogName"></el-input>
            </el-form-item>

            <el-form-item label="附件" class="text-left">
                <!-- v-model="v.files"  -->
                <file-upload @emitFiles="getFiles(i, $event)" :multiple="true" accept=".pdf">
                    <el-button class="btn-primary">上传文件</el-button>
                </file-upload>
            </el-form-item>

            <div v-if="v.files.length" class="text-left preview-group mb-4">
                <span class="file-preview" v-for="(item, ind) in v.files">
                    <a :href="item.url" target="_blank">
                        <span>点击预览</span>
                    </a>
                    <i class="el-icon-error" @click="delectFile(i, ind)"></i>
                </span>
            </div>

            <div class="handler del w-full text-center" @click="handleDelete(i)">删除该产品</div>
        </el-form>

        <div class="handler add w-1/2 text-center mx-auto my-6" @click="handleAdd">+ 继续添加</div>
        <div class="text-center mx-auto">
            <el-button class="btn-primary" @click="onSubmit">提交</el-button>
            <el-button type="info" @click="onCancel">取消</el-button>
        </div>
    </el-card>
</template>

<script>
    import {Form, FormItem} from 'element-ui';
    import FileUpload from '../../components/base/FileUpload';

    export default {
        components: {
            ElForm: Form,
            ElFormItem: FormItem,
            FileUpload
        },
        data() {
            return {
                products: [],
                productItem: {
                    productName: '',
                    manufactureName: '',
                    fileType: '',
                    catalogName: '',
                    files: []
                }
            };
        },
        watch: {
            form: {
                deep: true,
                handler: () => {
                    this.$emit('input', form);
                }
            }
        },
        methods: {
            handleDelete(index) {
                this.products.splice(index, 1);
            },
            handleAdd() {
                this.pushItem();
            },
            pushItem() {
                this.products.push(JSON.parse(JSON.stringify(this.productItem)));
            },
            onSubmit() {
                API.post('user/product', this.products).then(res => {
                    Ele.$message.success('上传成功');
                    this.$router.go(-1);
                });
            },
            onCancel() {
                this.$router.go(-1);
            },
            getFiles(index, val) {
                this.products[index].files = [...this.products[index].files.concat(val)];
            },
            delectFile(proIndex, fileIndex) {
                this.products[proIndex].files.splice(fileIndex, 1);
            }
        },
        created() {
            this.pushItem();
        }
    };
</script>

<style lang="scss">
    .product-edit {
        &__item {
            &.pd {
                padding: 20px 40px;
                vertical-align: top;
            }

            .preview-group {
                padding-left: 80px;
            }

            .file-preview {
                position: relative;
                display: inline-block;
                vertical-align: top;
                width: 100px;
                height: 100px;
                margin-right: 10px;
                margin-bottom: 10px;
                background: transparent url('~static/images/file.png') center/cover;
                a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: inline-block;
                    width: 100px;
                    height: 100px;
                    z-index: 1;

                    span {
                        display: inline-block;
                        visibility: hidden;
                    }

                    &:hover {
                        span {
                            display: inline-block;
                            visibility: visible;
                            width: 100px;
                            height: 100px;
                            text-decoration: none;
                            line-height: 100px;
                            text-align: center;
                            background-color: rgba(0, 0, 0, .6);
                            color: #eee;
                        }

                        & + .el-icon-error {
                            color: transparent;
                        }
                    }
                }

                .el-icon-error {
                    position: absolute;
                    right: 0;
                    top: 0;
                    transform: translate3d(50%, -50%, 0);
                    color: #ddd;
                    z-index: 999;

                    &:hover {
                        color: #333;
                    }
                }
            }
        }

        .el-input__inner {
            border: 0;
            border-radius: 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .handler {
            padding: 12px;
            font-size: 14px;
            background: #f2f2f2;

            &.del {
                color: #E33A4F;
            }

            &.add {
                color: #02A7FB;
            }
        }
    }
</style>
